<template>
    <div class="user-bind-card-verified">
        <ul class="steps" v-if='(action != "back")'>
            <li class="steps__item active">
                <span>1</span>
                <p>实名认证</p>
            </li>
            <li class="steps__item" v-if='(from=="user-mine")'>
                <span>2</span>
                <p>银行卡绑定</p>
            </li>
            <li class="steps__item" v-else>
                <span>2</span>
                <p>信用报告</p>
            </li>
        </ul>
        <p class="bind-card__tips">请保证本人信息真实性，否则会影响您的信用报告，导致无法借款或出借</p>

        <ul class="form-box">
            <li class="form__item detail">
                <span class="form__key">真实姓名</span>
                <div class="form__value">
                    <input v-model='name' type="text" placeholder="请输入姓名">
                </div>
            </li>
            <li class="form__item">
                <span class="form__key">身份证号</span>
                <div class="form__value">
                    <input v-model='id' type="text" placeholder="请输入身份证号">
                </div>
            </li>
            <!-- <li class="form__item">
                <span class="form__key">银行卡号</span>
                <div class="form__value">
                    <input v-model='card' type="tel" placeholder="请输入银行储蓄卡卡号">
                </div>
            </li> -->
            <li class="form__item">
                <span class="form__key">手机号码</span>
                <div class="form__value">
                    <input v-model='tel' type="tel" placeholder="请输入手机号">
                </div>
            </li>
        </ul>

        <div class="bind-card-button" @click='goLianlian'>
            <span class="button long">下一步</span>
        </div>
        <p class="bind-explain">有借为您的信息提供安全加密，不会泄漏给第三方</p>


        <modal 
            :show='show_warning'
            :maskClose='false'>
            <div class="modal-bind-card-warning">
                <p>感谢您选择有借，基于风控考虑，在有借进行借款／出借业务的用户，年龄必须在18周岁-55周岁。为您带来不便，请谅解。</p>
                <div class="modal-bind-card__button"><span @click='show_warning = false'>关闭</span></div>
            </div>
        </modal>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import pickerList from '../components/PickerList.vue'
    import tabBox from '../components/TabBox.vue'
    import tab from '../components/Tab.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { userBindCardVerifiedValidation } from '../validation/validation'
    import { getQueryString } from '../utils/utils'
    import { userApi, lenderApi } from '../api/api'
    import moment from 'moment'

    export default {
        components:{
            footerBar,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            buttonLoading,
            pagination,
            payPassword,
            pickerList,tabBox,
            tab
        },
        data() {
            return {
                from:this.$route.query.from,
                action:this.$route.query.action,
                name:'',
                id:'',
                card:'',
                tel:'',
                show_warning:false
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            currentPage(){
                if(_.isEmpty(this.listInfo)) return 1
                return this.listInfo.pageNum
            },
            userInfo(){
                return this.localInfo.userInfo
            },
            ageAuth(){
                let id = this.id
                let date = id.substring(6, 10) + "-" + id.substring(10, 12) + "-" + id.substring(12, 14);
                let momentDate = moment(date)
                let momentNow = moment()
                let diff = momentNow.diff(momentDate, 'years')
                
                if(diff>=18 && diff<= 55){
                    return true
                }
                return false
            },
            noEditObject(){
                return _.isEmpty(this.editObject)
            },
            noInvoiceInfo(){
                return _.isEmpty(this.invoiceInfo)
            }
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip',
                'setGoHome',
                'setUserInfo'
            ]),

            // function

            goUserBindCardTransactionPassword(){
                this.$router.push({
                    name:'user-bind-card-transaction-password'
                })
            },
            goLianlian(item){
                let params = {
                    name:this.name,
                    id:this.id,
                    card:this.card,
                    tel:this.tel
                }
                if(!userBindCardVerifiedValidation(params)) return
                if(!this.ageAuth){
                    this.show_warning = true
                    return
                }

                this.showLoading()
                userApi.realNameAuth({
                    realName:this.name,
                    idNumber:this.id,
                    mobile:this.tel
                })
                .then(this.setUserInfo)
                .then(result=>{
                    this.hideLoading()
                    console.log(result)
                    if(this.from == 'user-mine'){
                        this.$router.replace({
                            name:'user-bind-card-list'
                        })
                        return
                    }
                    if(this.action == 'back'){
                        this.$router.back()
                        return
                    }
                    this.$router.push({
                        name:'user-credit-report-index'
                    })
                })
                .catch(error=>{
                    this.hideLoading()
                    console.error(error)
                })
            },
            getList(num){
                this.loading = true
                allApi.userList(num)
                .then(result=>{
                    this.loading = false
                    this.listInfo = result
                    this.records = result.records
                    if(result.totalPage < result.pageNum){
                        this.getList(result.totalPage)
                    }
                })
                .catch(error => {
                    console.error(error)
                    this.loading = false
                })
            },
            getAccount(){
                this.loading_count = true
                allApi.userCount()
                .then(result=>{
                    this.loading_count = false
                    this.userCount = result
                })
                .catch(error => {
                    console.error(error)
                    this.loading_count = false
                })
            },
        },
        created(){
            this.setGoHome(true)
            this.tel = this.userInfo.user && this.userInfo.user.mobile
            let status = this.$route.query.status
            let msg = decodeURIComponent(this.$route.query.msg)
            if(status == 'fail'){
                this.setMsgTip({
                    text:msg,
                    type:'error'
                })
            }
            if(status == 'success'){
                this.goUserBindCardTransactionPassword()
            }
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .user-bind-card-verified{
        .mine-header{
            background-color: #fff;
        }
        .mine-header__avatar{
            text-align: center;
            position: relative;
            overflow:hidden;
            .avatar{
                margin-bottom: 8px;
                margin-top: 16px;
                position: relative;
                display: block;
                img{
                    width: 56px;
                    height: 56px;
                    border-radius: 50%;
                    border:1px solid $sectionColor;
                    position: relative;
                    z-index:2;
                }
                &:after{
                    content:'';
                    position: absolute;
                    top:50%;
                    border-top:1px solid $sectionColor;
                    left:16px;
                    right:16px;
                }
            }
            p{
                @extend %font-subhead;
                color:$importColor;
            }
        }
        .mine-header__list{
            display: flex;
            padding-top: 25px;
        }
        .mine-header__item{
            width: 30%;
            flex:1;
            text-align: center;
            img{
                width: 72px;
                height: 72px;
            }
            p{
                @extend %font-subhead;
                padding-top: 16px;
                color:$importColor;
            }
            span{
                @extend %font-caption;
                display: block;
            }
            padding-bottom: 24px;
        }
        .more{
            background-color: #fff;
            padding: 8px 0;
            margin-top: 16px;
            margin-bottom: 43px;
        }
        .more__item{
            display: flex;
            align-items: center;
            padding: 16px;
            img{
                display: block;
                width: 20px;
                height: 20px;
            }
            p{
                @extend %font-subhead;
                flex:1;
                padding-left: 16px;
                color:$importColor;
            }
            .iconfont{
                display: block;
                font-size: 12px;
            }
        }
    }

</style>
